<template>
	<view class="fixed-table-container">
		<uni-table emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr class="head-row">
				<view class="fixed-columns-group">
					<uni-th v-if="selectInfo">
						<view v-if="selectInfo==='single'">
							单选
						</view>
						<u-checkbox v-else v-model="selectAllData" @click.native="selectAll()"></u-checkbox>
					</uni-th>
					<template v-for="(col,colIndex) in fixedColumns">
						<uni-th :align="col.align" v-if="col.width&&col.IsVisibleApp" :width="col.width"
							:key="col.prop+colIndex">{{ col.label}}</uni-th>
					</template>
				</view>
				<template v-for="(col,colIndex) in scrollableColumns">
					<uni-th :align="col.align" v-if="col.width&&col.IsVisibleApp" :width="col.width"
						:key="col.prop+colIndex">{{ col.label}}</uni-th>
				</template>
				<!-- <uni-th align="center" v-if="" :width="col.width">
				</uni-th> -->
			</uni-tr>
			<!-- 表格数据行 -->
			<template v-for="(row,rowIndex) in data">
				<uni-tr :key="rowIndex">
					<view class="fixed-columns-group">
						<uni-td v-if="selectInfo">
							<u-checkbox v-model="row.isChecked" :key="rowIndex"></u-checkbox>
						</uni-td>
						<template v-for="(col,colIndex) in fixedColumns">
							<uni-td v-if="col.width&&col.IsVisibleApp" :key="col.prop+colIndex">
								<template v-if="col.isEdit">
									<picker v-if="col.ControlType==='date'" mode="date" :value="row[col.prop]"
										@change="change($event,row,col.prop)">
										<view class="uni-input">{{row[col.prop]}}</view>
									</picker>
									<input v-else type="text" v-model="row[col.prop]">
								</template>
								<template v-else>
									<view>{{row[col.prop]}}</view>
								</template>
							</uni-td>
						</template>
					</view>
					<template v-for="(col,colIndex) in scrollableColumns">
						<uni-td v-if="col.width&&col.IsVisibleApp" :key="col.prop+colIndex">
							<template v-if="col.isEdit">
								<picker v-if="col.ControlType==='date'" mode="date" :value="row[col.prop]"
									@change="change($event,row,col.prop)">
									<view class="uni-input">{{row[col.prop]}}</view>
								</picker>
								<input v-else type="text" v-model="row[col.prop]">
							</template>
							<template v-else>
								<view>{{row[col.prop]}}</view>
							</template>
						</uni-td>
					</template>
				</uni-tr>
			</template>
		</uni-table>

	</view>
</template>

<script>
	export default {
		name: "myTable",
		props: {
			columns: {
				type: Array,
				default: function() {
					return []
				}
			},
			data: {
				type: Array,
				default: function() {
					return []
				}
			},
			height: {
				type: String,
				default: '100%'
			},
			headerHeight: {
				type: String,
				default: '45rem',
			},
			lineHeight: {
				type: String,
				default: '45rem',
			},
			selectInfo: {
				// 选择列，可选值 single:单选；其他值默认多选;默认传select
				type: String,
				default: ''
			}
		},
		data() {
			return {
				selectAllData: false
			};
		},
		computed: {
			fixedColumns() {
				return this.columns.filter(val => val.fix)
			},
			scrollableColumns() {
				return this.columns.filter(val => !val.fix)
			}
		},
		methods: {
			change(e, row, prop) {
				row[prop] = e.detail.value
			},
			selectAll() {
				this.data.forEach(val => val.isChecked = this.selectAllData)
			}
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.fixed-table-container {
		width: 100%;
		overflow-x: hidden;
		height: 100%;
		position: relative;

		.uni-table {
			width: 100%;
			height: 100%;
			overflow: auto;
			table-layout: fixed;
			border-collapse: collapse;

			/* 使用固定表格布局 */
			.u-checkbox {
				display: inline-block;
			}

			/* 固定列组样式 */
			.fixed-columns-group {
				position: sticky;
				left: 0;
				z-index: 2;
				background-color: #fff;
				// display: flex;
			}

			/* 表头固定 */
			.uni-th {
				position: sticky;
				top: 0;
				z-index: 3;
			}

			.head-row {
				position: sticky;
				top: 0;
			}
		}

	}
</style>